<template>
  <page-container duration="0" :show="commentBoxShow" @beforeleave="hide">
    <view class="comment-box" v-show="commentBoxShow" :class="isShow?'comment-box-show':''">
      <image @click="hide()" class="close-img" :src="image_hosts + 'icon_cloes.png'"></image>
	  <view class="comment-list" :class="isShow?'comment-list-show':''">
		  <view class="info-main">
			 <!-- 商品信息 -->
			 <view class="goods-info">
			 	<image class="goods-img" :src="goodsInfo.goodsImg"></image>
				<view class="right">
					<view class="name">{{goodsInfo.goodsName}}</view>
					<view class="spce-box">
						<view class="unit">单位：{{goodsInfo.goodsUnit}}</view>
						<view class="price">单价：<text class="price-text">{{goodsInfo.salePrice}}元</text></view>
					</view>
				</view>
			 </view> 
			 <!-- 购买数量 -->
			 <view class="num-box">
				 <view class="title">购买数量</view>
				<view class="shop-num-right-box">
					<view @click="delNum()" class="shop-num-right-box-left">-</view>
					<view class="shop-num-right-box-center">
						<input @input='updatePrice()' v-model="postData.buyNum" type="number">
					</view>
					<view @click="addNum()" class="shop-num-right-box-right">+</view>
				</view>
			 </view>
			 <!-- 分割线 -->
			 <image class="line-img" :src="image_hosts + 'img_xinfengtiao.png'"></image>
			 <!-- 按钮列表 -->
			 <view class="tap-button">
				 <view @click="changeTap(1)" class="button" :class="postData.delivery===1?' select':'empty'">到店自提</view>
				 <!-- <view @click="changeTap(2)" class="button" :class="postData.delivery===2?' select':'empty'">快递配送</view> -->
			 </view>
			 <!-- 地址-->
			 <view class="address-box">
				 <image class="address-img" :src="image_hosts + 'icon_place.png'"></image>
				 <view v-if="postData.delivery===1" class="right">
					 <text class="title">自提点：</text>
					 <text class="info">{{shopAddress.address}}</text>
					 <!-- <text class="button">变更</text> -->
				 </view>
				 <view v-if="postData.delivery===2" class="right">
					 <text class="title">自提点：</text>
					 <view>张三 15899999999</view>
					 <view>
						 <text class="info">{{shopAddress.provinceName}}{{shopAddress.cityName}}{{shopAddress.countyName}}{{shopAddress.address}}</text>
						 <text class="button">变更</text>
					 </view>
				 </view>
			 </view>
		  </view>
		  <!-- 底部按钮-->
		  <view class="bottom-button">
			  <view :key="buttonKey" @click="submitOrder()" class="button">
				  <text class="unit">￥</text>
				  <text class="num">{{postData.goodsTotalPrice}}</text>
				  提交订单
			  </view>
		  </view>
		
      </view>
    </view>
  </page-container>
</template>

<script>
export default {
	props: {
		goodsInfo:{
			type: Object,
			default: function () {
				return {};
			},
		},
		shopAddress:{
			type: Object,
			default: function () {
				return {};
			},
		},
		videoId:{
			type: Number,
			default: 0,
		},
		fromType:{
			type: Number,
			default: 1,
		}
	},
  data() {
    return {
      image_hosts: this.image_host + 'mall/',
      isShow: false,
      commentBoxShow: false,
	  buttonKey: 1,
	  postData:{
		  buyNum: 1, // 购买数量
		  delivery: 1, // 送货类型 1 到店自提 2 快递配送
		  addressId: '',
		  goodsTotalPrice: 0,
		  hasAchievement: 1,
		  orderGOods: [],
		  videoId: '',
		  fromType:1
	  }
	  
    };
  },
  methods: {
	  // 增加数量
	  addNum(){
	  	this.postData.buyNum += 1
	  	this.updatePrice()
	  	this.$forceUpdate()
	  },
	  // 减少数量
	  delNum(){
	  	this.postData.buyNum -=1
	  	if(this.postData.buyNum <= 0){
	  		this.postData.buyNum = 0
	  	}
	  	this.updatePrice()
	  	this.$forceUpdate()
	  },
	  // 计算应售价格
	  updatePrice(){
		// 判断是否超过购买限额
		if(this.postData.buyNum > this.goodsInfo.purchaseLimit){
			this.postData.buyNum = this.goodsInfo.purchaseLimit
			uni.showToast({title:"超过最大购买数量",icon:"none"})
		}
	  	this.postData.goodsTotalPrice = this.accMul(this.postData.buyNum,this.goodsInfo.salePrice)
	  },
	  //乘法
	  accMul(arg1,arg2) {
	  	var m=0,s1=arg1.toString(),s2=arg2.toString();
	  	try{m+=s1.split(".")[1].length}catch(e){}
	  	try{m+=s2.split(".")[1].length}catch(e){}
	  	return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
	  },
	  // 切换送货类型
	  changeTap(type){
		  this.postData.delivery = type
	  },
    /**
     * 显示窗口
     * @param item
     */
    show(item){
      this.commentBoxShow=true;
	  this.updatePrice()
      this.$nextTick(()=>{
        this.isShow=true
      })
    },
    /**
     * 隐藏窗口
     */
    hide(){
      this.isShow=false
      setTimeout(()=>{
        this.commentBoxShow=false;
      },300)
    },
    /**
     * 提交订单
     * @returns {Promise<void>}
     */
    async submitOrder()
    {
		let _this = this
	  // 判断是否选商品
	  if(this.postData.buyNum <=0){
		  uni.showToast({title:'请先选择商品数量',icon:'none'})
		  this.buttonKey++
		  this.$forceUpdate()
		  return
	  }
	  uni.showLoading({title:"订单提交中",mask: true,icon: 'circle'})
      let goodsData = {};
	  goodsData.goodsNo = this.goodsInfo.goodsNo
	  goodsData.goodsNumber = this.postData.buyNum
	  goodsData.goodsPrice = this.goodsInfo.salePrice
	  this.postData.orderGOods = []
	  this.postData.orderGOods.push(goodsData)
	  this.postData.videoId = this.videoId
	  this.postData.addressId = this.shopAddress.id
	  this.postData.fromType = this.fromType
      let res = await this.$javaCircle.doRequest("post",'vs/mall/generateOrder',this.postData,'json')
      if (res.data.code === 0) {
        // 跳转到 支付页面
		uni.redirectTo({
			url:'/shop/pages/index/order?orderNo='+res.data.data.mallOrders.mallOrderNo
		})
      }else{
		  _this.buttonKey++
		  uni.hideLoading()
		  uni.showToast({title:res.data.message,icon:'none'})
	  }
    },
  },
}
</script>

<style lang="scss" scoped>
.comment-box{
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: all .3s linear;
}
.comment-box-show{
  background-color: rgba(0,0,0,.4);
}
.comment-list{
  width: 100%;
  height: 980rpx;
  background-color: #F2F4F7;
  border-radius: 50rpx 50rpx 0rpx 0rpx;
  position: absolute;
  bottom: -980rpx;
  left: 0;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  transition: all .3s cubic-bezier(1, -0.15, 1, 1);
  overflow: hidden;
}

.comment-list-show{
  bottom: 0;
}
.close-img{
	z-index: 101;
	position: absolute;
	bottom: 1004rpx;
	right: 24rpx;
	width: 58rpx;
	height: 58rpx;
}
.info-main{
	background-color: #ffffff;
	padding: 50rpx 30rpx;
}
.goods-info{
	display: flex;
	align-items: center;
	.goods-img{
		width: 150rpx;
		height: 150rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}
	.right{
		width: 528rpx;
		.name{
			font-size: 44rpx;
			color: #292A30;
			text-overflow: ellipsis;
			white-space:nowrap;
			overflow: hidden;
		}
		.spce-box{
			padding-top: 10rpx;
			font-size: 36rpx;
			color: #666666;
			display: flex;
			justify-content: space-between;
			.price-text{
				color: #FF2800;
				font-size: 40rpx;
				font-weight: bold;
			}
		}
	}
}
.num-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30rpx;
	.title{
		font-size: 38rpx;
		color: #666666;
		font-weight: 500;
	}
	.shop-num-right-box {
		width: 214rpx;
		height: 66rpx;
		line-height: 66upx;
		text-align: center;
		border-radius: 4rpx;
		border:2rpx solid #CCCCCC;
		display: flex;
	}
	.shop-num-right-box-left {
		flex: 3;
		border-right: 2rpx solid #CCCCCC;
		color: #CCCCCC;
	}
	.shop-num-right-box-center {
		flex: 4;
	}
	.shop-num-right-box-center input {
		width: 100%;
		height: 66rpx;
		line-height: 66rpx;
		font-weight: bold;
	}
	.shop-num-right-box-right {
		flex: 3;
		border-left: 2rpx solid #CCCCCC;
		color: #CCCCCC;
	}
}
.line-img{
	width: 695rpx;
	height: 8rpx;
	margin: 50rpx 0;
}
.tap-button{
	display: flex;
	justify-content: space-between;
	align-items: center;
	.button{
		width: 330rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 12rpx;
		border: 2rpx solid #5CAE77;
		font-size: 40rpx;
		text-align: center;
	}
	.select{
		background: #5CAE77;
		color: #FFFFFF;
	}
	.empty{
		background: #ffffff;
		color: #5CAE77;
	}
}
.address-box{
	display: flex;
	margin-top: 50rpx;
	font-size: 42rpx;
	.address-img{
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}
	.right{
		width: 630rpx;
	}
	.title{
		color: #666666 ;
	}
	.info{
		color: #333333 ;
	}
	.button{
		color: #4A90E2;
		text-decoration: underline;
		padding-left: 20rpx;
	}
}
.bottom-button{
	position: fixed;
	bottom: 0;
	left: 0;
	display:flax;
	justify-content: center;
	background-color: #ffffff;
	padding:32rpx 32rpx 60rpx 32rpx;
	.button{
		width: 686rpx;
		height: 98rpx;
		line-height:98rpx;
		background: #5CAE77;
		border-radius: 14rpx;
		font-size: 44rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
	}
	.unit{
		font-size: 30rpx;
	}
	.num{
		padding-right: 20rpx;
	}
}
</style>
